<template>
	<view class="info" style="background-color:#fff;height:100%">
		<view @click="onChooseAvatar" class="headerImage"
			style="padding:25rpx;border-bottom:1px solid #E9E9E9;padding-bottom: 30rpx;">
			<text style="padding-left:30rpx;font-size:30rpx">头像</text>
			<view style="display: flex;align-items: center;">
				<image class="avatar-wrapper" :src="Icon?Icon:userInfo.Icon" mode="aspectFit"></image>
				<uni-icons type="right" size="19" color="#555"></uni-icons>
			</view>
		</view>
		<view class="flex jbetween headerImage"
			style="padding:25rpx; padding-bottom:25rpx;border-bottom:1px solid #E9E9E9" @click="editPopupClick('name')">
			<text style="font-size:30rpx;padding-left:20rpx"><text style="color:red"> *</text>姓名 </text>
			<view v-if="!name" @click="editPopupClick('name')" style="font-size:30rpx;color:#ccc;margin-right: 20rpx;">
				请输入姓名
			</view>
			<view v-else @click="editPopupClick('name')" style="font-size:30rpx;color:#333;margin-right: 20rpx;">
				{{name}}
			</view>
		</view>
		<!--  @click="editPopupClick('phone')" -->
		<view class="flex jbetween headerImage"
			style="padding:25rpx;padding-bottom:25rpx;border-bottom:1px solid #E9E9E9" @click="editPopupClick('phone')">
			<text style="font-size:30rpx;padding-left:20rpx"><text style="color:red"> *</text>手机号 </text>
			<view v-if="!phone" style="font-size:30rpx;color:#ccc;margin-right: 20rpx;">
				请输入手机号</view>
			<view v-else style="font-size:30rpx;color:#333;margin-right: 20rpx;">{{phone}}
			</view>
		</view>
		<view class="flex jbetween headerImage"
			style="padding:25rpx;padding-bottom:25rpx;border-bottom:1px solid #E9E9E9" @click="editPopupClick('sex')">
			<text style="font-size:30rpx;padding-left:20rpx">性别 </text>
			<view class="flex" @click="editPopupClick('sex')" style="font-size:30rpx;justify-content: center;">
				<text>{{sex?sex:'无'}}</text>
				<uni-icons type="right" size="19" color="#555"></uni-icons>
			</view>
		</view>
		<view class="flex jbetween headerImage"
			style="padding:25rpx;padding-bottom:25rpx;border-bottom:1px solid #E9E9E9"
			@click="editPopupClick('birthday')">
			<text style="font-size:30rpx;padding-left:20rpx">出生日期 </text>
			<view class="flex" @click="editPopupClick('birthday')"
				style="font-size:30rpx;color:#ccc;justify-content: center;">
				<text v-if="!birthday">请选择出生日期</text>
				<text style="color:#333">{{birthday}}</text>
				<uni-icons type="right" size="19" color="#555"></uni-icons>
			</view>
		</view>
		<view class="flex jbetween headerImage"
			style="padding:25rpx;padding-bottom:25rpx;border-bottom:1px solid #E9E9E9"
			@click="editPopupClick('address')">
			<text style="font-size:30rpx;padding-left:20rpx">地址 </text>
			<view v-if="!address" @click="editPopupClick('address')"
				style="font-size:30rpx;color:#ccc;margin-right: 20rpx;">
				请输入地址
			</view>
			<view v-else @click="editPopupClick('address')" style="font-size:30rpx;color:#333;margin-right: 20rpx;">
				{{address}}
			</view>
		</view>
		<view class="flex jbetween headerImage"
			style="padding:25rpx;padding-bottom:25rpx;border-bottom:1px solid #E9E9E9" @click="editPopupClick('email')">
			<text style="font-size:30rpx;padding-left:20rpx">邮箱 </text>
			<view v-if="!email" @click="editPopupClick('email')"
				style="font-size:30rpx;color:#ccc;margin-right: 20rpx;">
				请输入邮箱</view>
			<view v-else @click="editPopupClick('email')" style="font-size:30rpx;color:#333;margin-right: 20rpx;">
				{{email}}
			</view>
		</view>
		<view class="flex jbetween headerImage" style="padding:25rpx; border-bottom:1px solid #E9E9E9"
			@click="editPopupClick('company')">
			<text style="font-size:30rpx;padding-left:20rpx">所属公司 </text>
			<view v-if="!company" @click="editPopupClick('company')"
				style="font-size:30rpx;color:#ccc;margin-right: 20rpx;">
				请输入所属公司</view>
			<view v-else @click="editPopupClick('company')" style="font-size:30rpx;color:#333;margin-right: 20rpx;">
				{{company}}
			</view>
		</view>
		<view class="cate-btnBox " style="background-color: #fff;">
			<button class="btn" style="background-color: #D1100B;padding:4rpx 30rpx;font-size: 30rpx;" type="primary"
				size="large" @click="submitUpdateUserInfo('submit')">提交</button>
		</view>
		<MadalPopup ref="MadalPopup" :visable.sync="pickerShowByDay" :defaultDate="defaultDay" :maxDay="maxDay"
			@confirm="confirmByDay">
		</MadalPopup>
		<SexPopup ref="SexPopup" :visable.sync="pickerShowSexPopup" :defaultDate="defaultDay"
			@confirm="confirmSexPopup">
		</SexPopup>
		<UserPopop ref="UserPopop" :placeholder="placeholder" :title="title" @submitPopup="dialogInputConfirm">
		</UserPopop>

		<uni-popup ref="onChooseAvatar" type="bottom">
			<view style="padding: 10rpx;">
				<button @click="onChooseAvatarSubmit('camera')" style="font-size: 35rpx;heigth:50rpx">拍照</button>
				<button style="margin-top: 10rpx;font-size: 35rpx;heigth:50rpx"
					@click="onChooseAvatarSubmit('album')">相册选取</button>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import MadalPopup from "../../component/MadalPopup.vue"
	import SexPopup from "../../component/SexPopup.vue"
	import UserPopop from "../../component/UserPopop.vue"
	import {
		UpdateDataByConditions, //更新用户信息
		TheDataUserInfo, //获取用户信息
	} from "../interface.js"
	const isEmail = (tmp) => {
		if (typeof(tmp) != "undefined" && tmp != "" && tmp != null) {
			var pattern = /^([0-9a-zA-Z_\.\-\u4e00-\u9fa5])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]{2,8})$/;
			return pattern.test(tmp);
		}
		return false;
	}
	const isPhone = (tmp) => {
		if (typeof(tmp) != "undefined" && tmp != "" && tmp != null) {
			var pattern = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;;
			return pattern.test(tmp);
		}
		return false;
	}
	export default {
		components: {
			MadalPopup,
			SexPopup,
			UserPopop
		},
		data() {
			return {
				pickerType: "性別",
				pickerShowByDay: false, //是否日期选择控件
				pickerShowSexPopup: false,
				defaultDay: [], //日期默认选择，为空则是当前日期
				maxDay: 60, //最大跨度日
				startDay: '',
				endDay: '',
				clickType: "", //点击的类型
				title: "", //弹窗标题
				value: "", //输入的值
				placeholder: "", //輸入的類型
				name: "",
				phone: "",
				sex: "",
				email: '',
				address: "",
				birthday: "",
				company: "",
				Icon: "", //头像
				userInfo: {}

			}
		},
		onload(options) {

		},
		onShow() {
			this.$refs.onChooseAvatar.close()
			// 获取用户信息
			this.getTheDataUserInfo()
		},
		methods: {
			// 用户头像上传
			onChooseAvatar(e) {
				this.$refs.onChooseAvatar.open()
			},
			// 拍照或相册选取提交
			onChooseAvatarSubmit(type) {
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: [type], //camera掉拍照，album是打开手机相册
					success: (res) => {
						console.log('选取文件成功后打印：', res)
						uni.navigateTo({
							url: '/subPackagesB/pages/info/ImageCropping?path=' + encodeURIComponent(
								res.tempFilePaths[0])
						})
					}
				})
			},
			// 获取用户信息
			getTheDataUserInfo() {
				TheDataUserInfo({
					id: uni.getStorageSync('userInfo').Id
				}).then(res => {
					if (res.Success) {
						console.log('获取用户信息', res)
						this.name = res.Data.Name ? res.Data.Name : res.Data.NickName
						this.phone = res.Data.Phone,
							this.sex = res.Data.Sex,
							this.address = res.Data.Address,
							this.birthday = res.Data.Birth?.substring(0, 10),
							this.email = res.Data.Email,
							this.company = res.Data.Company,
							this.Icon = res.Data.Icon, //头像
							this.userInfo = res.Data
						uni.removeStorageSync('userInfo', res.Data)
						uni.setStorageSync('userInfo', res.Data)
					}

				})
			},
			// 提交修改用户信息
			submitUpdateUserInfo() {
				var that = this
				if (!this.name) return this.$util.toast('请输入姓名')
				// if (!this.phone) return this.$util.toast('请输入手机号')
				// if (!isPhone(this.phone)) return this.$util.toast('请输入正确的手机号')
				if (this.email && !isEmail(this.email)) return this.$util.toast('请输入正确的邮箱')
				let params = {
					Ids: [uni.getStorageSync('userInfo').Id],
					"Conditions": [{
							"Condition": "Phone",
							"Keyword": this.phone
						},
						{
							"Condition": "Name",
							"Keyword": this.name
						},
						{
							"Condition": "Sex",
							"Keyword": this.sex
						},
						{
							"Condition": "Birth",
							"Keyword": this.birthday ? this.birthday : ""
						},
						{
							"Condition": "Address",
							"Keyword": this.address ? this.address : ""
						},
						{
							"Condition": "Email",
							"Keyword": this.email ? this.email : ""
						},
						{
							"Condition": "Company",
							"Keyword": this.company ? this.company : ""
						},
						{
							"Condition": "Icon",
							"Keyword": this.Icon ? this.Icon : this.userInfo.Icon
						}
					]
				}
				console.log('提交用户信息', params)
				uni.showLoading({
					title: '修改中'
				})
				UpdateDataByConditions(params).then(res => {
					if (res.Success) {
						console.log('修改用户信息成功', res)
						uni.showToast({
							title: '修改成功',
							duration: 5000
						})
						// 更新获取用户信息
						this.getTheDataUserInfo()
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)

					} else {
						that.$util.toast(res.Msg)
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					}
				})
			},
			confirmSexPopup(sex) {
				console.log('性別', sex)
				this.sex = sex
			},
			confirmByDay(date) {
				console.log('date', date)
				this.birthday = date[0]
			},
			dialogInputConfirm(data, type) {

				if (type === 'name') this.name = data
				if (type === 'phone') this.phone = data
				if (type === 'address') this.address = data
				if (type === 'email') this.email = data
				if (type === 'company') this.company = data
				console.log('回传', data, this.value)

			},
			editPopupClick(type) {
				this.clickType = type
				console.log('type', this.clickType, this.value)
				if (type === 'name') {
					this.placeholder = "请输入姓名"
					this.title = "请输入姓名"
					this.$refs.UserPopop.open(this.name, 'name')
				} else if (type === "sex") {
					this.pickerShowSexPopup = true

				} else if (type === "birthday") {
					this.pickerShowByDay = true

				} else if (type === "address") {
					this.placeholder = "请输入地址"
					this.title = "请输入地址"
					this.$refs.UserPopop.open(this.address, 'address')
				} else if (type === 'email') {
					this.placeholder = "请输入邮箱"
					this.title = "请输入邮箱"
					this.$refs.UserPopop.open(this.email, 'email')
				} else if (type === 'company') {
					this.placeholder = "请输入公司"
					this.title = "请输入公司"
					this.$refs.UserPopop.open(this.company, 'company')
				} else if (type === 'phone') {
					this.placeholder = "请输入手机号"
					this.title = this.phone ? "换绑手机号" : '绑定手机号'
					this.$refs.UserPopop.open(this.phone, 'phone')
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.info {
		.headerImage {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:active {
				background-color: #f1f1f1;
			}
		}

		.avatar-wrapper {
			margin: 20rpx 0 0 20rpx;
			border: 1px solid #ccc;
			padding: 10rpx;
			background-color: transparent;
			width: 80rpx;
			height: 80rpx;
			border-radius: 5px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.cate-btnBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 99;
		height: 98rpx;
		padding: 20rpx 0rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

		button {
			width: 100%;
		}

		.btn {
			background-color: #d1100b;
			color: #ffffff;
			margin-bottom: 6rpx;
		}
	}
</style>